<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
</head>
<style>
    html,
    body {
        background-color: #f2f0f0;
    }

    .info {
        background-color: #fff;
        margin: 0.5rem 0;
        padding: 0.8rem 0.5rem;
    }

    .info .title {
        font-size: 0.8rem;
        color: #333;
        margin-bottom: 0.5rem;
    }

    .info .subtitle {
        color: #ccc;
        font-size: 0.7rem;
    }

    .info .subtitle .icon {
        width: 1rem;
        height: 1rem;
        float: left;
        margin-right: 0.5rem;
    }

    .info .subtitle .arrow {
        float: right;
        width: 0.4rem;
        height: 0.8rem;
        margin-top: -0.8rem;
    }

    .card {
        padding: 0 0.8rem;
        border-radius: 0.5rem;
        background-color: #fff;
        margin-bottom: 2rem;

    }

    .card .item {
        width: 100%;
        height: 2rem;
        line-height: 2rem;
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        font-size: 0.7rem;
    }

    .card .item .tou,
    .card .item .wei {
        width: 50%;
        text-align: right;
        font-size: 0.7rem;
    }

    .card .item .tou {
        text-align: left;
    }

    .card .item:last-child {
        border-bottom: none;
    }

    .card .item img {
        width: 0.4rem;
        height: 0.8rem;
        margin-top: 0.6rem;
        float: right;
    }

    .submit {
        margin: 2rem 0.8rem;
        text-align: center;
        line-height: 2rem;
        height: 2rem;
        background-color: #2882e1;
        color: #fff;
        font-size: 0.8rem;
        border-radius: 10rem;
    }

    .submit:active {
        background-color: #ccc;
    }
</style>

<body>
    <div id="app" v-cloak>
        <div class="info" @click="go_upload_idCard_win">
            <div class="title">身份证信息</div>
            <div class="subtitle">
                <img class="icon" src="../image/icon_notice.png" alt="">
                上传身份证后收入才能正常发放哦
                <img src="../image/arrow_right.png" alt="" class="arrow">
            </div>
        </div>

        <div class="card">
            <div class="item">
                <div class="tou">开户姓名</div>
                <input type="text" class="wei" placeholder="请输入您的姓名" v-model="name">
            </div>
            <div class="item">
                <div class="tou">银行卡号</div>
                <input type="text" class="wei" placeholder="请输入您的卡号" v-model="bankAccount">
            </div>
            <div class="item">
                <div class="tou">开户银行</div>
                <input type="text" class="wei" placeholder="请输入开户行" v-model="bankName">
            </div>
            <div class="item" @click="selectCity">
                <div class="tou">所在地区</div>
                <input type="text" class="wei" style="padding-right: 0.5rem;" v-model="ssq_showtext" readonly disabled
                    placeholder="请选择所在地区">
                <img src="../image/arrow_right.png" alt="" class="arrow">
            </div>
            <div class="item">
                <div class="tou">银行网点</div>
                <input type="text" class="wei" placeholder="请输入您开户的银行网点" v-model="bankBranches">
            </div>
        </div>

        <div class="submit" @click="save">保存银行卡信息</div>
    </div>
</body>

</html>
<script src="../script/set_root.js"></script>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/hb.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript">
    apiready = function () {
        hb_ready();
        get_ajax("ucenter/bank/view", {
            userId: $api.getStorage("emp").userId
        }, function (res, err) {
            // alert(JSON.stringify(res))
            if (res.code == 2000 && res.data) {
                app.name = res.data.name
                app.ssq_showtext = res.data.province + ' ' + res.data.city
                app.province = res.data.province
                app.city = res.data.city
                app.bankAccount = res.data.bankAccount
                app.bankName = res.data.bankName
                app.bankBranches = res.data.bankBranches
                app.idcardFront = res.data.idcardFront
                app.idcardBack = res.data.idcardBack
            } else {
                toast("您还没有添加银行卡哦")
            }
        })
        api.addEventListener({
            name: 'sendImg'
        }, function (ret, err) {
            // alert(JSON.stringify(ret))
            app.idcardFront = ret.value.idcardFront
            app.idcardBack = ret.value.idcardBack
            toast("身份证提交成功")
        });
    }
    //使用vue对数据进行绑定
    var app = new Vue({
        el: '#app',
        data: {
            ssq_showtext: "",
            level1_id: 0, // 省级id
            level2_id: 0, // 市级id
            level3_id: 0, // 区级id
            province: "", // 省级名称
            city: "", // 市级名称
            name: "", // 姓名
            bankAccount: "", // 卡号
            bankName: "", // 开户行名称
            bankBranches: "", // 网点
            idcardFront: "", // 身份证前面
            idcardBack: "", // 身份证背面
        },
        methods: {
            go_upload_idCard_win() {
                api.openWin({
                    name: "upload_idCard_win",
                    url: "upload_idCard_win.html",
                    pageParam: {
                        idcardFront: app.idcardFront,
                        idcardBack: app.idcardBack,
                    }
                })
            },
            // 保存
            save() {
                if (!app.name) {
                    toast("请输入您的姓名")
                    return
                }
                if (!app.bankAccount || app.bankAccount.length < 15) {
                    toast("您输入的卡号有问题")
                    return
                }
                if (!app.bankName) {
                    toast("请输入开户行")
                    return
                }
                if (!app.ssq_showtext) {
                    toast("请选择所在地区")
                    return
                }
                if (!app.bankBranches) {
                    toast("请输入您开户的银行网点")
                    return
                }
                if (!app.idcardFront || !app.idcardBack) {
                    toast("您需要绑定您的身份证")
                    return
                }
                post_ajax("ucenter/bank/save", {
                    userId: $api.getStorage("emp").userId,
                    name: app.name,
                    bankBranches: app.bankBranches,
                    idcardFront: app.idcardFront,
                    idcardBack: app.idcardBack,
                    province: app.province,
                    city: app.city,
                    bankName: app.bankName,
                    bankAccount: app.bankAccount
                }, function (res, err) {
                    // alert(JSON.stringify(res))
                    if (res.code == 2000) {
                        alert("绑定银行卡成功！")
                        api.closeWin()
                    } else {
                        toast("服务器开小差了，请稍后再试")
                    }
                    // alert(JSON.stringify(err))
                })
            },
            // 省市选择
            selectCity() {
                var UIActionSelector = api.require('UIActionSelector');
                UIActionSelector.open({
                    datas: 'widget://res/city.json',
                    layout: {
                        row: 5,
                        col: 2,
                        height: 30,
                        size: 12,
                        sizeActive: 14,
                        rowSpacing: 5,
                        colSpacing: 10,
                        maskBg: 'rgba(0,0,0,0.2)',
                        bg: '#FFFFFF',
                        color: '#9B9B9D',
                        colorActive: '#f00',
                        colorSelected: '#000'
                    },
                    animation: true,
                    cancel: {
                        text: '取消',
                        size: 12,
                        w: 90,
                        h: 35,
                        bg: '#fff',
                        bgActive: '#ccc',
                        color: '#888',
                        colorActive: '#fff'
                    },
                    ok: {
                        text: '确定',
                        size: 12,
                        w: 90,
                        h: 35,
                        bg: '#fff',
                        bgActive: '#ccc',
                        color: '#888',
                        colorActive: '#fff'
                    },
                    title: {
                        text: '请选择',
                        size: 12,
                        h: 44,
                        bg: '#eee',
                        color: '#888'
                    },
                    fixedOn: api.frameName
                }, function (ret, err) {
                    if (ret) {
                        //alert(JSON.stringify(ret));
                        if (ret.eventType == 'ok') { //代表用户点了确认键
                            app.province = ret.level1
                            app.city = ret.level2
                            app.ssq_showtext = app.province + ' ' + app.city
                            app.level1_id = ret.selectedInfo[0].id
                            app.level2_id = ret.selectedInfo[1].id
                        }

                    } else {
                        alert("网络不通畅，请稍后再试！");
                    }
                });
            }
        },

    })
</script>